<template>
  <BaseCard>
    <UiTable :tableData="list" v-bind="tableConfig">
      <template #genderSlot="scope">
        <div>
          {{ mapGender[scope.row.gender] }}
        </div>
      </template>
      <template #handleTableSlot="scope">
        <el-button type="primary" link @click="edit(scope.row)">
          编辑
        </el-button>
      </template>
    </UiTable>
  </BaseCard>
</template>

<script setup lang="js">
import { ref } from "vue"
import { tableConfig } from "./config/table.config"

// 表格数据
const list = [
  { name: "测试1", gender: 1, dateTime: "2025-01-01 00:00:00" },
  { name: "测试2", gender: 1, dateTime: "2025-02-02 00:00:00" },
  { name: "测试3", gender: 2, dateTime: "2025-03-03 00:00:00" }
]

const mapGender = {
  1: "男",
  2: "女"
}

// 编辑
const edit = (row) => {
  console.log(`编辑方法执行了--->`, row)
}
</script>
<style scoped lang="scss"></style>